<template>
  <n-grid x-gap="12" :cols="2">
    <n-gi>
      <n-card title="字典类型">
        <div>
          <n-button type="primary" dashed size="small" @click="openDialog(1)">
            <template #icon>
              <n-icon>
                <AddCircleOutline />
              </n-icon>
            </template>
            新增
          </n-button>
        </div>
        <div>
          <n-spin :show="loading">
            <n-data-table
              :columns="columns"
              :data="data"
              :row-key="rowKey"
              default-expand-all
              style="margin-bottom: 10px; width: 100%"
              :max-height="tableHeight"
              :scroll-x="1500"
            />

            <div style="display: flex; justify-content: flex-end">
              <n-pagination
                v-model:page="page"
                v-model:page-size="pageSize"
                :page-count="total"
                :on-update:page="updatePage"
                :on-update:page-size="updatePageSize"
                show-size-picker
                :page-sizes="[10, 20, 30, 40]"
              />
            </div>
          </n-spin>
        </div>
      </n-card>
    </n-gi>
    <n-gi>
      <n-card title="字典项">
        <div>
          <n-button type="primary" dashed size="small" @click="openDialog(2)">
            <template #icon>
              <n-icon>
                <AddCircleOutline />
              </n-icon>
            </template>
            新增
          </n-button>
        </div>
      </n-card>
    </n-gi>
  </n-grid>

  <myDialog
    ref="myDialogRef"
    :showModal="showModal"
    :dialogType="dialogType"
    @closeModal="closeModal"
  ></myDialog>
</template>

<script setup lang="ts">
import {
  AddCircleOutline,
  FlashOutline,
  SearchOutline,
} from "@vicons/ionicons5";
import { h, inject, ref } from "vue";
import myDialog from "../dictionary/dicDialog.vue";
import { NButton, NIcon, NImage, NPopconfirm, NPopover, NTag } from "naive-ui";

const showModal = ref(false);
const myDialogRef = ref<any>(null);
const dialogTitle = ref("新增字典类型");
const dialogType = ref(1);
const page = ref(1);
const pageSize = ref(10);
const tableHeight = ref(inject("tableHeight"));
const total = ref(0);
const loading = ref(false);
const columns = ref([
   {
    type: "selection",
    fixed: 'left' 
  },
  {
    title: "字典名称",
    key: "i_fileName",
    width: 150,
  },
  {
    title: "字典编码",
    key: "i_filePath",
    render(row) {
      return [
        h(
          NPopover,
          {
            trigger: "hover",
          },
          {
            trigger: () => {
              return h(
                NTag,
                {
                  style: {
                    marginRight: "6px",
                  },
                  type: "success",
                  bordered: false,
                },
                {
                  default: () => "路径",
                }
              );
            },
            default: () => {
              return row.i_filePath;
            },
          }
        ),
      ];
    },
  },
  {
    title: "排序",
    key: "i_filePath",
    render(row) {
      return [
        h(
          NPopover,
          {
            trigger: "hover",
            placement: "right",
          },
          {
            trigger: () => {
              return h(
                NTag,
                {
                  style: {
                    marginRight: "6px",
                  },
                  type: "success",
                  bordered: false,
                },
                {
                  default: () =>
                    h(NIcon, null, {
                      default: () => h(EyeOutline),
                    }),
                }
              );
            },
            default: () => {
              return h(NImage, {
                src: imgUrl + row.i_filePath,
                width: "200",
                previewDisabled: true,
              });
            },
          }
        ),
      ];
    },
  },
  {
    title: "状态",
    key: "i_description",
    render(row) {
      return [
        h(
          NPopover,
          {
            trigger: "hover",
          },
          {
            trigger: () => {
              return h(
                NTag,
                {
                  style: {
                    marginRight: "6px",
                  },
                  type: "success",
                  bordered: false,
                },
                {
                  default: () => "描述",
                }
              );
            },
            default: () => {
              return row.i_description;
            },
          }
        ),
      ];
    },
  },
  {
    title: "操作",
    key: "actions",
    fixed: "right",
    render(row) {
      return [
        h(
          NPopconfirm,
          {
            positiveButtonProps: {
              size: "tiny",
            },
            negativeButtonProps: {
              size: "tiny",
            },
            onPositiveClick: (e) => {
              deleteImage(row.i_id).then((res) => {
                if (res.code == 200) {
                  window.$message.success(res.message);

                  getImage();
                } else {
                  window.$message.error(res.message);
                }
              });
            },
          },
          {
            trigger: () => {
              return h(
                NButton,
                {
                  style: { marginRight: "10px" },
                  strong: true,
                  secondary: true,
                  type: "error",
                  size: "small",
                },
                { default: () => "删除" }
              );
            },
            default: () => {
              return "确定要删除？";
            },
          }
        ),
        h(
          NButton,
          {
            strong: true,
            secondary: true,
            type: "warning",
            size: "small",
            onClick: () => updateImage(row),
          },
          { default: () => "编辑" }
        ),
      ];
    },
    width: 150,
  },
]);

const openDialog = (type = 1) => {
  showModal.value = true;
  if (type == 1) {
    dialogTitle.value = "新增字典类型";
    dialogType.value = type;
    myDialogRef.value.init();
  } else if (type == 2) {
    dialogType.value = type;
    dialogTitle.value = "新增字典项";
  }
};
const closeModal = () => {
  showModal.value = false;
};
const updatePageSize = (ps) => {
  pageSize.value = ps;
  getImage();
};
const updatePage = (p) => {
  page.value = p;
  getImage();
};
</script>
